@charset "utf-8";
@import "reset";
@import "base";

.wrap {
    width: 100%;
    // 顶部
    header {
        position: relative;
        height: vw(110);
        min-width: vw(1024);
        background: white;
        width: 100%;
        .logo {
            margin-left: 10%;
            width: 20%;
            float: left;
            height: 100%;
            position: absolute;
            img {
                position: absolute;
                bottom: vw(20);
            }
        }
        .follow {
            padding: vw(10) 0 0 vw(10);
            margin-right: 10%;
            letter-spacing: 1px;
            float: right;
            font-size: vw(12);
            width: vw(80);
            text-align: center;
            span {
                overflow: auto;
            }
        }
        .phone {
            margin-top: vw(45);
            float: right;
            img {
                width: vw(37);
                display: inline-block;
            }
            span {
                font-size: vw(28);
                font-weight: bold;
                color: $color;
                display: inline-block;
                vertical-align: super;
            }
        }
    }

    // 主体区域
    main {
        .navBar {
            .EnglishNav,
            .ChineseNav {
                background-color: #c6c6c6;
                font-size: 0.6vw;
                text-align: center;
                letter-spacing: 1px;
                width: 100%;
                display: flex;
                justify-content: center;
                ul {
                    overflow: hidden;
                    text-align: center;
                    color: white;
                    letter-spacing: 1px;
                    width: 80%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    li {
                        float: left;
                        width: 12.5%;
                        a {
                            color: #fff;
                        }
                    }
                }
            }
            .ChineseNav {
                background-color: $color;
                ul {
                    li {
                        font-size: vw(25);
                        text-align: center;
                        font-weight: bold;
                        padding: vw(3) 0;
                        cursor: pointer;
                        &:hover {
                            background-color: rgba(0, 0, 0, 0.2);
                        }
                    }
                }
            }
        }

        // 轮播图
        .banner {
            width: 100%;
        }

        // 现在体检等功能区
        .menuBox {
            width: 100%;
            background: #dededc;
            text-align: center;
            .content {
                width: 70%;
                height: 100%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .menu {
                    width: 12%;
                    margin: 2% 0;
                    .menuImg {
                        img {
                            margin: 0 auto;
                            width: 70%;
                            &:hover {
                                transform: scale(1.1);
                            }
                        }
                    }
                    span {
                        a {
                            color: #ea5504;
                            font-size: 1.14vw;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

    // 底部
    footer {
        width: 100%;
        background-color: $color;
        color: #fff;
        .content {
            width: 70%;
            padding: 1.5% 0 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin: 0 auto;
            .puhui-link {
                width: 180px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .link {
                    span {
                        font-weight: bold;
                        margin: vw(8) 0;
                    }
                    ul {
                        li {
                            margin: vw(8) 0;
                            cursor: pointer;
                        }
                    }
                }
            }
            .phoneNum {
                height: 130px;
                border: 1px solid;
                border-color: transparent transparent transparent #fff;
                transform: translateY(vw(-20));
                .number {
                    padding-left: vw(70);
                    padding-top: vw(30);
                    img {
                        width: vw(20);
                        float: left;
                    }
                    p {
                        font-weight: bold;
                        font-size: 1.3vw;
                        padding-top: vw(8);
                        padding-left: vw(30);
                    }
                }
                span {
                    margin-left: vw(21);
                    letter-spacing: 1px;
                    font-weight: bold;
                    font-size: vw(20);
                }
            }
            .qrCode {
                text-align: center;
                padding-right: vw(20);
                padding-bottom: vw(20);
                .qrIcon {
                    width: vw(100);
                    float: left;
                    margin-left: vw(8);
                }
            }
        }
        .copyright {
            width: 70%;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            border: 1px solid;
            border-color: #fff transparent transparent transparent;
            padding: vw(20) 0 vw(40);
            ul {
                li {
                    float: left;
                    margin-left: vw(10);
                }
            }
        }
    }
}
